
<template>
  <div v-if="user">
    <van-cell title="姓名" is-link :value="user.username" @click="toEdit('username',user.username,'昵称')"/>
    <van-cell title="账号" is-link :value="user.userAccount" @click="toEdit('userAccount',user.userAccount,'账号')"/>
    <van-cell title="头像" is-link @click="toEdit('avatarUrl',user.avatarUrl,'头像')">
      <div>
        <img style="width: 100px;" :src="user.avatarUrl">
      </div>
    </van-cell>
    <van-cell title="标签" is-link :value="user.tags" @click="toEdit('tags',user.tags,'标签')" />
    <van-cell title="性别" is-link :value="getGenderText(user.gender)"  @click="toEdit('gender',user.gender,'性别')"/>
    <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone',user.phone,'电话')"/>
    <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email',user.email,'邮箱')"/>
    <van-cell title="注册时间" is-link :value="user.createTime"/>
    <div style="display: flex;justify-content: center;padding:20px ;">
      <van-button  type="danger" @click="logout">退出</van-button>
    </div>
  </div>
  <van-empty v-else description="未登录" />
  
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue';
import {useRouter} from 'vue-router';
import myAxios from '../../plugins/myAxios';

const router = useRouter();


const user = ref()
const toEdit = (key:string,value:string,flag:string)=>{
  router.push({
    path:'/user/edit',
    query:{
      editKey:key,
      editValue:value,
      editFlag:flag
    }
  })
}

onMounted(()=>{
 getUser()
  // console.log(user);
  
})

const getGenderText = (gender:any)=>{
  if(gender == 1) return '男' 
  else return '女'
}
const getUser = async()=>{
  const res = await myAxios.get('/user/current')
  user.value = res.data.data
}

const logout = ()=>{
  myAxios.post('/user/logout').then(()=>{
    
    window.location.reload();
  })
}

</script>



<style scoped>

</style>
  